<template>
	<!-- 账单组件 - 账单列表 -->
	<view id="bill_container">
		<view v-if="billData.length === 0" class="no-data">暂无账单数据</view>
		<view 
			v-for="(bill, index) in billData" 
			:key="bill.id" 
			class="bill-item"
			:class="{'not_first_bill': index != 0}"
			>
			<view class="bill-info">
				<!-- 账单左侧 月-日 基本信息 -->
				<view class="bill-info-left">
					<view class="bill-info-left-icon">
						<image :src="baseUrl + bill.iconName" mode="heightFix"></image>
					</view>
					<view class="bill-info-left-content">
						<view class="bill-info-left-content_type">
							{{ bill.typeName }}
						</view>
						<view class="bill-info-left-content-remark">
							{{ bill.remark }}
						</view>
						<view class="bill-info-left-content-time">
							{{ bill.transactionTime }}
						</view>
					</view>
				</view>
				<!-- 账单右侧金额 -->
				<view class="bill-info-right">
					<view class="bill-info-right-mount">
						<!-- 收入和支出不同的样式 -->
						<span v-if="bill.type == 2" class="expend_style">-{{ bill.amount }}</span>
						<span v-else class="income_style">+{{ bill.amount }}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, watch, defineProps, onMounted } from 'vue';

// 文件系统根路径
let baseUrl = uni.$baseUrl + "category$"

// 在组件挂载时初始化账单数据
onMounted(() => {
	updateBillData();
});

// 接收父组件传递的参数
const props = defineProps({
	showPosition: {
		type: String,
		required: true
	},
	billFilterVo: {
		type: Object,
		default: () => null
	}
});

// 定义账单数据
const billData = ref([]);

// 更新账单数据的方法
const updateBillData = async () => {
	console.log("账单组件数据更新...");
	// 清空之前查询的账单数据
	billData.value = [];
	
	try {
		// 根据 showPosition 进行数据请求
		let response;
		if (props.showPosition === 'index') {
			// 发送请求获取最近7天的账单
			response = await fetchBillDataOfIndex(props.billFilterVo);
		} else if (props.showPosition === 'all_bill') {
			// 使用过滤条件获取全部账单
			response = await fetchBillDataOfFilter(props.billFilterVo);
		}
		
		billData.value = response || [];
		
		// 格式化时间
		formatDateTime();
	} catch (error) {
	}
};

// 获取首页账单数据 - 近7天
async function fetchBillDataOfIndex(paramObj){
	console.log("首页获取账单数据...", paramObj);
	const res = await uni.$http.post(`/bills/getBillData/index`, paramObj);
	if(res.data.code == 0){
		uni.$showT(res.data.msg);
		return 0;
	}
	
	return res.data.data;
}

// 获取所有账单页面 - 参数过滤项
async function fetchBillDataOfFilter(paramObj){
	const res = await uni.$http.post(`/bills/getBillData/all_bill`, paramObj);
	if(res.data.code == 0){
		uni.$showT(res.data.msg);
		return 0;
	}
	
	return res.data.data;
}

// 格式化时间
function formatDateTime(){
	for (let bill of billData.value) {
		bill.transactionTime = dayjs(bill.transactionTime).format('YYYY-MM-DD HH:mm:ss');
		bill.amount = bill.amount.toFixed(2);
	}
}

watch(
	() => props.billFilterVo,
	(newVal, oldVal) => {
		// console.log("查询条件变化...");
		updateBillData();
	},
	{ deep: true } // 添加深度监听选项
);

defineExpose({
  updateBillData
})

</script>

<style lang="scss" scoped>
#bill_container {
	padding: 10px;
}

.no-data {
	text-align: center;
	color: #888;
}

.bill-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
	padding: 10px;
	// border: 1px solid #ccc;
	border-radius: 5px;
}

.bill-info {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
}

.bill-amount {
	font-weight: bold;
}

.bill-type {
	color: #666;
}

.bill-date {
	color: #999;
}

.bill-info-left{
	display: flex;
	
}

.bill-info-left-icon{
	// border: solid red 1px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.bill-info-left-icon image{
	height: 40px;
}

.bill-info-left-content{
	margin-left: 10rpx;
}

.bill-info-left-content-remark{
	padding: 10rpx 0px;
}

.bill-info-left-content-time, .bill-info-left-content-remark{
	font-size: 13px;
	color: #626262;
}

.bill-info-right{
	// border: solid red 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
}

.expend_style{
	color: #f10000;
}

.income_style{
	color: #00c300;
}

.not_first_bill{
	border-top: solid #d5d5d5 1px;
}



</style>